<template>
  <view class="main">
    <view class="swiper">
      <van-swipe class="my-swipe" :stop-propagation="false" :autoplay="3000" :show-indicators="false" height="200px">
        <van-swipe-item @click="preventTouch" v-for="(item, index) in infoDataDesk?.icon?.split(',')" :key="index">
          <view class="images" :style="{
            background: 'url(' + infoDataDesk?.icon + ')',
            backgroundRepeat: 'no-repeat',
            backgroundSize: '100% 100%',
          }"></view>
          <!-- <image
            class="images"
            @click="preventTouch"
            :src="infoDataDesk?.icon"
            mode="aspectFill" 
          />-->
        </van-swipe-item>
      </van-swipe>
      <view class="back dispaly-just-between w-100">
        <van-icon name="arrow-left" color="#111" size="30" @click="back" />
        <!-- userInfo.userId == infoDataDesk?.createUser -->
        <view class="system" v-if="isAdmin == 1 || isGroup == 1" @click="
          $goUrl(
            `/pages/circle/pages/consoleManage?id=${infoDataDesk?.id}&newNum=${infoDataDesk?.newNum}&memberNum=${infoDataDesk?.memberNum}`
          )
          ">圈子后台</view>
        <view class="system" v-else @click="quitCircle">退出圈子</view>
      </view>
    </view>
    <view class="desc">
      <van-sticky :offset-top="0">
        <view class="title-box">
          <!-- @click="circleNameShow = true" -->
          <view class="title">{{
            infoDataDesk?.name
          }}</view>
          <view class="title-bottom dispaly-just-between">
            <view class="submit-person">发起人：{{ infoDataDesk?.createName }}</view>
            <view class="dispaly-center more-box">
              <view class="more">成员 {{ infoDataDesk?.memberNum }}</view>
              <view class="line"></view>
              <view class="more">热度{{ changeNum(infoDataDesk?.hotNum) }}+</view>
              <view class="line"></view>
              <view class="more">浏览量{{ changeNum(infoDataDesk?.scanNum) }}+</view>
            </view>
          </view>
        </view>
        <view class="dispaly-just-between op">
          <view class="tab dispaly-center">
            <Tabs :tab-list="tabList" @change="tabChange" />
            <view class="hot" v-if="current == 0">热度{{ infoDataDesk?.hotNum }}+</view>
            <!--            <view class="hot" style="margin-left: 10px" v-if="current == 0"-->
            <!--              >浏览量{{ infoDataDesk?.scanNum }}+</view-->
            <!--            >-->
          </view>
          <view class="dispaly-just-between option">
            <!--            v-if="current == 0"-->
            <view class="screening dispaly-center" @click="showFun">
              <view class="s-text">筛选</view>
              <view class="s-icon">
                <image src="/static/icon/down.svg" mode="widthFix" />
              </view>
            </view>
            <view class="search-icon" @click="showBottom = true">
              <image src="/static/icon/search.svg" mode="widthFix" />
            </view>
          </view>
        </view>
        <view class="notice" style="
            margin-bottom: 20px;
            border-bottom: 1px #eee solid;
            padding-bottom: 20px;
          " v-if="noticeData">
          <view class="dispaly-just-between notice-title">
            <view class="n-title">圈子公告</view>
            <view class="s" @click="putAwayShow = !putAwayShow">{{
              putAwayShow ? "收起" : "展开"
            }}</view>
          </view>
          <view class="notice-con" v-if="putAwayShow">{{ noticeData }}</view>
        </view>
      </van-sticky>

      <view class="list" style="padding-bottom: 100rpx">
        <view class="comment" v-if="current == 0">
          <CommentCard v-for="(item, index) in getTrendsPageData" :key="index" :showMessage="true" :showTel="false"
            :showShare="true" :isSkip="true" :isMargin="false" :isShowCom="true" @deleteComment="deleteComment"
            :isShowManage="true" @manage="manage" :isShowOption="true" @option="handleOption" :item="item"
            :isGroup="isGroup" :isAdmin="isAdmin" @reload="reload" :current="current == 0 ? 0 : ''" :types="1"
            :tUser="infoDataDesk?.createUser" :radios="1" />
          <LoadMore :status="status" :isHot="true" />
        </view>
        <view class="comment" v-else>
          <userCard :item="item" v-for="(item, index) in getMemberPageData" :key="index" @isTrue="isTrueChange"
            :cId="infoDataDesk?.id" :isShow="true" :circleId="infoDataDesk?.id" :isAdmin="isAdmin" :isGroup="isGroup" />
          <LoadMore :status="status" />
        </view>
      </view>
    </view>
  </view>

  <view class="option-more dispaly-just-between">
    <view class="option-item dispaly-align-center">
      <span>积分</span>
      <span>（{{ userInfo.point ? userInfo.point : 0 }}）</span>
    </view>
    <view class="option-item dispaly-align-center" @click="showOpenApplay = !showOpenApplay">发布动态</view>
    <view class="option-item dispaly-align-center" @click="createPoster">我的海报</view>
  </view>

  <van-popup v-model:show="showOpenApplay" position="center"
    :style="{ width: '40%', height: '100px', borderRadius: '10px' }">
    <view class="applay-content">
      <view class="option-item dispaly-align-center" @click="$goUrl(`/pages/circle/pages/submitPost?id=${id}`)">
        <view class="applays">
          <image src="../../../static/icon/applays.svg" mode="" />
          <text>发帖子</text>
        </view>
      </view>
      <view class="option-item dispaly-align-center" @click="
        $goUrl(
          `/pages/forSale/pages/submitForSale?source=0&data=${JSON.stringify({
            name: infoDataDesk?.name,
            id: infoDataDesk?.id,
          })}&type=1`
        )
        ">
        <view class="applays custom-demand">
          <image src="../../../static/icon/demand.png" mode="" />
          <text>发供需</text>
        </view>
      </view>
    </view>
  </van-popup>

  <!-- 搜索 -->
  <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '100%' }">
    <van-sticky>
      <view class="search-pop">
        <view class="title-box dispaly-just-between">
          <van-icon name="arrow-left" color="#111" size="25" @click="closeShowB" />
          <view class="txt dispaly-align-center">搜索</view>
          <view class="txt">&nbsp;</view>
        </view>
      </view>
      <view class="s-box">
        <van-search v-model="keyWord" placeholder="搜索" shape="round" />
      </view>
    </van-sticky>
    <view class="list">
      <view class="user-item" style="padding: 30rpx" v-for="(item, index) in getTrendsPageData" v-if="current == 0">
        <CommentCard :isShowCom="true" :showMessage="true" :showTel="false" :showShare="true" :isSkip="true"
          :isMargin="false" @deleteComment="deleteComment" :isShowManage="true" @manage="manage" :isShowOption="true"
          @option="handleOption" :types="1" :item="item" :isGroup="isGroup" :isAdmin="isAdmin" @reload="reload"
          :isHot="true" :tUser="infoDataDesk?.createUser" />
      </view>
      <view class="user-item" style="padding: 30rpx" v-for="(item, index) in getMemberPageData" v-if="current == 1">
        <userCard :item="item" :isShow="true" :circleId="infoDataDesk?.id" :isAdmin="isAdmin" :isGroup="isGroup" />
      </view>
    </view>
  </van-popup>

  <!-- 删除评论提示 -->
  <van-dialog v-model:show="deleteComemntShow" title="提示" show-cancel-button message="确认删除评论吗？">
  </van-dialog>

  <!-- 筛选 -->
  <van-action-sheet v-model:show="screeningShow" :actions="actions" @select="onSelect" cancel-text="取消"
    @cancel="screeningShow = false" />

  <!-- 操作 -->
  <van-action-sheet v-model:show="optionShow" :actions="optionActions" @select="optionOnSelect" cancel-text="取消"
    @cancel="optionShow = false" />

  <!-- 管理 -->
  <van-action-sheet v-model:show="manageShow" :actions="manageActions" @select="manageOnSelect" cancel-text="取消"
    @cancel="manageShow = false" />

  <!-- 删除帖子提示 -->
  <van-dialog v-model:show="deleteDynamicShow" title="提示" show-cancel-button message="确认删除帖子吗？"
    @confirm="delForSaleConfirm">
  </van-dialog>

  <!-- 删除帖子踢人提示 -->
  <van-dialog v-model:show="deleteDynamicTPersonShow" title="提示" show-cancel-button message="确认删除帖子并将此用户移出圈子吗？
付费用户将会退款" @confirm="confirmSuccess">
  </van-dialog>

  <!-- 圈子名称提示 -->
  <van-dialog :showCancelButton="false" v-model:show="circleNameShow" :title="infoDataDesk?.name" show-cancel-button
    :message="infoDataDesk?.memo">
  </van-dialog>

  <!-- 海报 -->
  <!-- <Poster :showPoster="showPoster" /> -->
  <van-popup v-model:show="showPoster" round>
    <view class="pop-main">
      <Poster v-if="currentIndex" :circleInfos="circleInfos" />
    </view>
  </van-popup>
  <!--  是否管理员-->
  <van-action-sheet v-model:show="showIsAdmin" :actions="adminActions" @select="onSelectAdmin" />
</template>

<script setup>
import { reactive, ref } from "vue";
import CommentCard from "@/components/commentCard/commentCard.vue";
import userCard from "./components/userCard.vue";
import Poster from "@/components/poster/poster.vue";
import {
  onLoad,
  onReachBottom,
  onPullDownRefresh,
  onShow,
} from "@dcloudio/uni-app";
import {
  getCircleDesk,
  getTrendsPage,
  notice,
  circleInfo,
  getMemberPage,
  delTrendsAndMember,
  trends,
  best,
  deleteForSale,
  report,
  quit,
  myProson,
  getPoster,
} from "@/api/apiList";

import { watch } from "vue";

const searchIsAdmin = ref(0);
const isAdmin = ref("");
const showIsAdmin = ref(false);
const isGroup = ref("");
const showOpenApplay = ref(false);
const adminActions = [
  { name: "否", value: 0 },
  { name: "是", value: 1 },
];
const preventTouch = (e) => {
  e.stopPropagation();
  e.preventDefault();
  return false;
};
const getMyProson = async () => {
  const res = await myProson({ circleId: infoDataDesk.value.id });
  if (res.code == 200) {
    isAdmin.value = res.data?.isAdmin
      ? res.data?.isAdmin
      : res.data[0]?.isAdmin;
    isGroup.value = res.data?.isGroup
      ? res.data?.isGroup
      : res.data[0]?.isGroup;
  }
};

const userInfo = uni.getStorageSync("userInfo");

const showFun = () => {
  if (current.value == 0) {
    screeningShow.value = true;
  } else {
    showIsAdmin.value = true;
  }
};

const changeNum = (num) => {
  let temp = parseInt(num);
  if (num > 10000) {
    temp = (num / 10000).toFixed(2) + "万";
  }
  return temp;
};

const createPoster = async () => {
  let result = await getPoster(id.value);
  if (result.code == 200) {
    // circleInfos.value = response?.msg;
    let obj = infoDataDesk.value;
    obj.qrCode = "data:image/png;base64," + result.msg;
    if (userInfo && userInfo.avatar) {
      obj.backImage = userInfo.avatar
        ? userInfo.avatar
        : "https://h5.qunxinghuzhu.com/h5/static/image/masterImage.png";
    }
    circleInfo.value = obj;

    currentIndex.value++;

    showPoster.value = true;
  }
};
const onSelectAdmin = (item) => {
  showIsAdmin.value = false;
  searchIsAdmin.value = item.value;
  // 重置页码
  queryData.pageNum = 1;
  getMemberPage(id.value);
};

const back = () => {
  // uni.navigateBack();
  uni.switchTab({
    url: "/pages/circle/circleIndex",
  });
};

// 退出圈子
const quitCircle = async () => {
  uni.showModal({
    title: "提示",
    content: "退出圈子",
    success: async function (res) {
      if (res.confirm) {
        const res = await quit({ circleId: infoDataDesk.value.id });
        if (res.code == 200) {
          uni.showToast({
            title: "退圈成功",
            icon: "none",
            mask: true,
          });
          setTimeout(() => {
            uni.reLaunch({
              url: "/pages/index/pages/groupDetail?id=" + infoDataDesk.value.id,
            });
          }, 1000);
        }
      }
    },
  });
};

const id = ref("");

const getMemberPageData = ref([]);
const getMemberPageChange = async (ids, origin) => {
  const parms = Object.assign(queryData, {
    id: ids,
    type: 0,
    search: origin,
    pageSize: 1000000,
    pageNum: 1,
    sortBy: infoDataDesk?.sortBy,
    isUserId: uni.getStorageSync("userInfo")?.data?.userId ? 1 : 0,
    isAdmin: searchIsAdmin.value,
  });
  parms.circleId = ids;
  const response = await getMemberPage(parms);
  if (response && response?.code == 200) {
    getMemberPageData.value = response?.rows.concat(getMemberPageData.value);
  }
};
const closeShowB = () => {
  showBottom.value = false;
  keyWord.value = "";
  // getMemberPageData.value = []
};

// 获取公告
const getNotice = async () => {
  const res = await notice({ id: id.value });
  if (res.code == 200) {
    if (res.data) {
      noticeData.value = res.data.content;
    }
  }
};

// 获取详情
const infoDataDesk = ref();
const noticeData = ref("");
const getInfoData = async (ids) => {
  const response = await getCircleDesk({ id: ids });
  if (response && response?.code == 200) {
    // 如果设置了 大图 取大图 否则用默认图片
    response.data.icon = response.data.backImage
      ? response.data.backImage
      : response.data.icon;
    infoDataDesk.value = response?.data;
    noticeData.value = response.data.notice;
    circleInfos.value = response?.data;
    currentIndex.value++;

    getMyProson();
  }
};

const reload = (tId) => {
  const index = getTrendsPageData.value.findIndex((item) => item.id == tId);
  getTrendsPageData.value[index].isLike =
    getTrendsPageData.value[index].isLike == 1 ? 0 : 1;
  if (getTrendsPageData.value[index].isLike == 1) {
    getTrendsPageData.value[index].likes++;
  } else {
    getTrendsPageData.value[index].likes--;
  }
  // queryData.pageNum = 1
  // getTrendsPageData.value = []
  // getInfoData(id.value)
  // getTrendsPageChange(id.value);
};

// 圈子动态列表
const queryData = reactive({
  pageSize: 10,
  pageNum: 1,
  circleId: "",
  permissions: 0,
});
const status = ref("noMore");
const getTrendsPageData = ref([]);
const getTrendsPageChange = async (ids, origin) => {
  delete queryData.type;
  delete queryData.id;
  queryData.circleId = ids;
  queryData.isUserId = uni.getStorageSync("userInfo")?.data?.userId ? 1 : 0;
  const response = await getTrendsPage(
    Object.assign(queryData, {
      search: origin,
    })
  );
  if (response?.code == 200) {
    if (response?.rows.length) {
      getTrendsPageData.value = [...getTrendsPageData.value, ...response?.rows];
      status.value = "noMore";
    } else {
      status.value = "noMore";
    }
  } else {
    status.value = "noMore";
  }
};

onReachBottom(() => {
  queryData.pageNum++;
  getTrendsPageChange(id.value, "");
  // getInfoData(id.value);
  // getMemberPageChange(id.value, "");
});

onPullDownRefresh(() => {
  uni.showLoading({
    title: "加载中",
  });
  queryData.pageNum = 1;
  getTrendsPageData.value = [];
  getTrendsPageChange(id.value, "");
  getMemberPageData.value = [];
  getMemberPageChange(id.value, "");
  uni.hideLoading();
  uni.stopPullDownRefresh();
});

const optionActions = ref([]);
const optionShow = ref(false);
const reportBusinessId = ref("");
const handleOption = (businessId, userId) => {
  const localUserId = uni.getStorageSync("userInfo").userId;
  optionActions.value = [];
  if (userId == localUserId) {
    optionActions.value.push({ name: "置顶", type: 2 });
    optionActions.value.push({ name: "删除", type: 3 });
    // return false
  } else {
    optionActions.value = [{ name: "举报", type: 1 }];
  }
  optionShow.value = true;
  reportBusinessId.value = businessId;
};

// 举报
const reportData = reactive({
  type: 1,
});
const optionOnSelect = async (data) => {
  reportData.businessId = reportBusinessId.value;
  if (data.type == 3) {
    return (
      (deleteDynamicShow.value = !deleteDynamicShow.value),
      (optionShow.value = !optionShow.value)
    );
  }
  if (data.type == 1) {
    let obj = {
      circId: circleInfos.value.id,
      trendsId: reportBusinessId.value,
    };
    const res = await report(obj);
    optionShow.value = false;
    if (res.code == 200) {
      uni.showToast({
        title: "举报成功",
        duration: 2000,
        icon: "none",
      });
    }
  } else {
    uni.navigateTo({
      url: `/pages/circle/pages/topDt?id=${reportBusinessId.value}&circleId=${infoDataDesk.value.id}`,
    });
    optionShow.value = false;
  }

  console.log(data, "data");
};

const screeningShow = ref(false);
const actions = ref([
  { name: "全部动态", type: 0 },
  { name: "只看精华", type: 1 },
  { name: "只看群主", type: 2 },
  { name: "只看采购", type: 3 },
  { name: "只看供应", type: 4 },
]);

// 筛选
const onSelect = (data) => {
  queryData.pageNum = 1;
  getTrendsPageData.value = [];
  queryData.permissions = data.type;
  getTrendsPageChange(id.value, keyWord.value);
  screeningShow.value = false;
  console.log(data, "data");
};

// 管理
const manageShow = ref(false);
const manageActions = ref([
  { name: "精华", type: 1 },
  // { name: "置顶", type: 2 },
  { name: "删除", type: 3 },
  { name: "删除并提出成员", type: 4 },
]);

const dId = ref("");
const newUserId = ref();
const manage = (id, userId) => {
  const index = getTrendsPageData.value.findIndex((item) => item.id == id);
  if (
    infoDataDesk.value.createUser ==
    getTrendsPageData.value[index].createUser ||
    getTrendsPageData.value[index].createUser == userInfo.userId ||
    isAdmin.value == 1 ||
    isGroup.value == 1
  ) {
    manageActions.value = [
      { name: "精华", type: 1 },
      { name: "置顶", type: 2 },
      { name: "删除", type: 3 },
      { name: "删除并提出成员", type: 4 },
    ];
  } else {
    manageActions.value = [
      { name: "精华", type: 1 },
      { name: "置顶", type: 2 },
      { name: "删除", type: 3 },
      { name: "删除并提出成员", type: 4 },
    ];
  }
  manageShow.value = true;
  dId.value = id;
  newUserId.value = userId;
};

// 删除帖子控制
const deleteDynamicShow = ref(false);

// 删除帖子踢人控制
const deleteDynamicTPersonShow = ref(false);

// 设为精华
const setBest = async (ids) => {
  const res = await best({ id: ids });
  if (res.code == 200) {
    uni.showToast({
      title: "设置成功",
      icon: "none",
    });
    queryData.pageNum = 1;
    getTrendsPageData.value = [];
    getTrendsPageChange(id.value, keyWord.value);
    manageShow.value = false;
  }
};

// 设为置顶
const setTop = async (ids) => {
  const res = await trends({ id: ids, isOverhead: 3 });
  if (res.code == 200) {
    uni.showToast({
      title: "置顶成功",
      icon: "none",
    });
    queryData.pageNum = 1;
    getTrendsPageData.value = [];
    getTrendsPageChange(id.value, keyWord.value);
    manageShow.value = false;
  }
};

// 删除动态
const deleteForSaleFun = async () => {
  const res = await deleteForSale(
    reportData.businessId ? reportData.businessId : dId.value
  );
  if (res.code == 200) {
    uni.showToast({
      title: "删除成功",
      icon: "none",
    });
    queryData.pageNum = 1;
    getTrendsPageData.value = [];
    getTrendsPageChange(id.value, keyWord.value);
    manageShow.value = false;
  }
};

const delForSaleConfirm = async () => {
  await deleteForSaleFun();
};

const manageOnSelect = (data) => {
  const { type } = data;
  switch (type) {
    case 1:
      setBest(dId.value);
      break;
    case 2:
      setTop(dId.value);
      break;
    case 3:
      deleteDynamicShow.value = true;
      break;
    case 4:
      deleteDynamicTPersonShow.value = true;
      break;
  }
};

const circleNameShow = ref(false);

const putAwayShow = ref(true);

const showBottom = ref(false);

const showPoster = ref(false);

const tabList = ref([
  { name: "动态", type: 1 },
  { name: "成员", type: 2 }, //暂时关闭
]);

// 点击tab
const current = ref(0);
const tabChange = (data) => {
  current.value = data.index;
  console.log(data);
  if (data.index == 0) {
    queryData.pageNum = 1;
    getTrendsPageData.value = [];
    getTrendsPageChange(id.value, keyWord.value);
  } else {
    getMemberPageData.value = [];
    getMemberPageChange(id.value, keyWord.value);
  }
};

const keyWord = ref("");

watch(keyWord, (origin) => {
  if (origin) {
    if (current.value == 0) {
      getTrendsPageData.value = [];
      getTrendsPageChange(id.value, origin);
    } else {
      getMemberPageData.value = [];
      getMemberPageChange(id.value, origin);
    }
  } else {
    getTrendsPageData.value = [];
    getTrendsPageChange(id.value, origin);
    getMemberPageData.value = [];
    getMemberPageChange(id.value, origin);
  }
});

// 删除评论
const deleteComemntShow = ref(false);
const deleteComment = () => {
  console.log(123);
  deleteComemntShow.value = true;
};

const circleInfos = ref();
const currentIndex = ref(0);
const circleInfoData = async (ids) => {
  const response = await circleInfo({ id: ids });
  if (response && response?.code == 200) {
    circleInfos.value = response?.data;
    currentIndex.value++;
  }
};

const isTrueChange = (e) => {
  console.log(e);
};

const confirmSuccess = async () => {
  // newUserId
  const response = await delTrendsAndMember({ id: dId.value });
  if (response && response?.code == 200) {
    uni.showToast({
      title: "删除成员成功",
      icon: "none",
    });
    setTimeout(() => {
      queryData.pageNum = 1;
      getTrendsPageData.value = [];
      getTrendsPageChange(id.value, keyWord.value);
      manageShow.value = false;
    }, 800);
  }
};
onLoad(async (e) => {
  if (e && e?.id) {

    // circleInfoData(e?.id);
    // getInfoData(id.value);
    // // getMemberPageChange(id.value);
    // getTrendsPageChange(id.value, keyWord.value);
  }
});



onLoad(async (e) => {

  id.value = e.id;
  getNotice();
  showOpenApplay.value = false;
  queryData.pageNum = 1;
  getTrendsPageData.value = [];
  getMemberPageData.value = [];
  setTimeout(() => {
    if (id.value) {
      getInfoData(id.value);
      if (current.value == 0) {
        getTrendsPageChange(id.value, keyWord.value);
      } else {
        getMemberPageChange(id.value);
        //暂时关闭;
      }
    }
  }, 1000);
  // window.location.reload()
});

onShow(() => {
  console.log("onShowonShowonShowonShowonShow", id.value);
  showOpenApplay.value = false;
  queryData.pageNum = 1;
  getTrendsPageData.value = [];
  getTrendsPageChange(id.value, keyWord.value);

})
</script>

<style lang="scss" scoped>
:deep(.van-sticky) {
  background-color: #fff;
  padding: 30rpx 0 0 0;
  width: 100%;
}

:deep(.van-action-sheet__name) {
  color: #0753fd;
}

.back {
  .system {
    padding: 10rpx 14rpx;
    font-family: PingFang SC Regular;
    font-size: 22rpx;
    color: #ffffff;
    margin-right: 20rpx;
    background: #0753fd;
    box-sizing: border-box;
    border: 0.5px solid #ffffff;
    border-radius: 8rpx;
  }
}

.main {
  position: relative;

  .swiper {
    position: relative;

    image {
      width: 100%;
      height: 260rpx;
    }

    .back {
      position: absolute;
      left: 10rpx;
      top: 30rpx;
    }
  }

  .desc {
    position: absolute;
    left: 0;
    right: 0;
    top: 200px;
    background-color: #fff;
    padding: 0 40rpx 40rpx 40rpx;
    border-radius: 20rpx 20rpx 0px 0px;

    .comment {
      margin-top: 32rpx;
    }

    .title-box {
      border-bottom: 1rpx solid #eee;
      padding-bottom: 40rpx;

      .title {
        font-family: PingFang SC Bold;
        font-size: 36rpx;
        font-weight: 900;
        color: #111111;
      }

      .title-bottom {
        margin-top: 18rpx;

        .submit-person {
          font-family: PingFang SC Medium;
          font-size: 24rpx;
          font-weight: normal;
          color: #111111;
        }

        .more-box {
          .more {
            font-family: PingFang SC Medium;
            font-size: 22rpx;
            color: #111111;
          }

          .line {
            margin: 0 11rpx;
            height: 18rpx;
            background-color: #0753fd;
            width: 1rpx;
          }
        }
      }
    }
  }

  .op {
    margin-top: 30rpx;

    .tab {
      .hot {
        font-family: PingFang SC Medium;
        font-size: 24rpx;
        font-weight: normal;
        color: #999999;
      }
    }

    .option {
      .s-text {
        font-family: PingFang SC Medium;
        font-size: 26rpx;
        font-weight: normal;
        color: #111111;
      }

      .s-icon {
        width: 32rpx;
        height: 20rpx;
        margin-right: 36rpx;

        image {
          width: 32rpx;
          height: 20rpx;
        }
      }

      .search-icon {
        width: 26rpx;
        height: 26rpx;

        image {
          width: 26rpx;
          height: 26rpx;
        }
      }
    }
  }

  .notice {
    margin-top: 40rpx;

    .notice-title {
      .n-title {
        font-family: PingFang SC Bold;
        font-size: 30rpx;
        font-weight: 700;
        color: #111111;
      }

      .s {
        color: #0753fd;
      }
    }

    .notice-con {
      margin-top: 36rpx;
      font-family: PingFang SC Regular;
      font-size: 26rpx;
      font-weight: normal;
      color: #111111;
    }
  }
}

.search-pop {
  .title-box {
    padding: 28rpx 0;

    .txt {
      font-family: PingFang SC Bold;
      font-size: 34rpx;
      font-weight: 700;
      color: #111111;
    }
  }
}

.s-box {
  border-bottom: 1rpx solid #eee;
  padding-bottom: 15rpx;
}

.list {
  // padding: 32rpx;
  margin-top: 20rpx;
}

.option-more {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  .option-item:nth-child(2) {
    border-left: 1rpx solid #fff;
    border-right: 1rpx solid #fff;
  }

  .option-item {
    width: 33.33%;
    height: 100rpx;
    background-color: #0753fd;
    font-family: PingFang SC Medium;
    font-size: 32rpx;
    color: #ffffff;
  }
}

.applays {
  display: flex;
  align-items: center;
  padding: 10px 0;

  image {
    width: 26px;
    height: 26px;
    margin-right: 8px;
  }

  text {
    font-size: 28rpx;
  }
}

.applay-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}

.custom-demand {
  image {
    width: 24px;
    height: 24px;
    margin-right: 5px;
  }
}
</style>

<style>
page {
  background-color: #f6f6f6;
}

.images {
  display: block;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 200px;
}
</style>
